<style lang="less">
	page{
		background: #f6f6f6;
	}
	.content{
		background: #FFFFFF;
	}
    .main_list{
    	padding:20upx;
    }
    .item_list{
    	width: 100%;
    	padding: 20upx 0;
    	border-bottom: 1px solid #DDDDDD;
    }
	.main_list .item_list:last-child{
		border-bottom: none;
	}
    .item_list_top,.item_list_cent,.item_list_bot{
    	overflow: hidden;
    }
    .item_list_top .item_list_fl{
    	float: left;
    	font-size: 32upx;
    }
    .item_list_top .item_list_fr{
    	float: left;
    	margin-left: 20upx;
    	font-size: 32upx;
    }
    .item_list_cent .item_list_cent_fl{
    	float: left;
    	line-height: 44upx;
    }
    .item_list_cent_fl_name text{
    	margin-right: 20upx;
    }
    .item_list_cent .item_list_cent_fr{
    	float: right;
    	line-height: 88upx;
    	font-size: 40upx;
    	color: #F43530;
    }
	.item_list_cent_fl_bot{
		text-align: left;
	}
    .item_list_bot_fl{
    	float: left;
    	color: #888;
    }
    .item_list_bot_fr{
    	float: right;
    	color: #888;
    }
	.segmented-control{
		width: 100%;
	}
	// 头部
	.top-main{
		margin: 20upx 0 0;
		background: #FFFFFF;
		.main-top{
			display: flex;
			justify-content: space-between;
			padding: 20upx 30upx;
			align-items:center;
			.main-top-fl{
				display: flex;
				align-items:center;
				.touxiang{
					width: 70upx;
					height: 70upx;
					border-radius: 50%;
				}
				.name-info{
					margin-left: 10upx;
					overflow: hidden;
					.name{
						font-size:30upx;
						font-weight:bold;
						color:rgba(51,51,51,1);
						line-height:36upx;
						margin-top: 10upx;
					}
					.memberTyp{
						line-height: 36upx;
						border: 2upx solid #DBC291;
						border-radius: 18upx;
						font-size: 20upx;
						font-weight: bold;
						color: #DBC291;
						padding: 0 20upx;
						margin-top: 10upx;
						box-sizing: border-box;
						float: left;
					}
					.vipclass{
						width: 250upx;
						height: auto;
					}
				}
			}
			.main-top-fr{
				.codeInfo{
					font-size:20upx;
					font-weight:bold;
					color:rgba(51,51,51,1);
					line-height:36upx;
				}
			}
		}
		.main-list.type{
			.main-list-for{
				// width: 33.33%;
				width: 50%;
			}
		}
		.main-list{
			display: flex;
			align-items: center;
			border-top: 1upx solid #ededed;
			width: 100%;
			.main-list-for{
				width: 25%;
				box-sizing: border-box;
				border-left: 1upx solid #ededed;
				text-align: center;
				padding: 20upx 0;
				position: relative;
				.num{
					font-size:30upx;
					font-family:'DINCond';
					font-weight:400;
					color:rgba(51,51,51,1);
					line-height:48upx;
				}
				.bjBut{
					font-size:30upx;
					font-weight:bold;
					color:rgba(51,51,51,1);
					background: url('https://static.xpandago.net/wechat/images/tc_tipicon%402x.png') no-repeat right center;
					background-size: 26upx;
					position: absolute;
					top: 30upx;
					right: 10upx;
					width: 30upx;
					height: 30upx;
				}
				.name{
					font-size:20upx;
					font-weight:500;
					color:rgba(153,153,153,1);
					line-height:29upx;
				}
			}
			.main-list-for:first-child{
				border-left: none;
			}
		}
	}
	.main-bot{
		margin-top: 20upx;
		background: #FFFFFF;
		.main-list-title{
			display: flex;
			justify-content: space-between;
			border-top: 1upx solid #ededed;
			padding: 0 30upx;
			.main-list-title-fl{
				font-size:30upx;
				font-weight:bold;
				color:rgba(51,51,51,1);
				line-height:90upx;
			}
			.main-list-title-fr{
				font-size:22upx;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:90upx;
				display: flex;
				align-items:center;
				.tiaozhuan{
					height: auto;
					width: 40upx;
				}
			}
		}
		.main-list-title.list:first-child{
			border-top: none;
		}
	}
	.main-top-title{
		padding: 20upx 30upx;
		display: flex;
		justify-content: space-between;
		.main-top-title-fl{
			font-size:30upx;
			font-weight:bold;
			color:rgba(51,51,51,1);
			padding-right: 38upx;
			background: url('https://static.xpandago.net/wechat/images/tc_tipicon%402x.png') no-repeat right center;
			background-size: 26upx;
		}
	}
	.zhao{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		background: #000000;
		opacity: 0.4;
	}
	.popup{
		text-align: center;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 10;
		.popup_main{
			padding: 50upx 0;
			width: 560upx;
			background: #FFFFFF;
			border-radius: 24upx;
			.popup_main_title{
				font-size: 34upx;
				font-weight: bold;
				color: #333333;
				line-height: 41upx;
				margin-bottom: 50upx;
			}
			.popup_main_price{
				margin: 10upx 0;
				font-size: 36upx;
				font-family: "DINCond";
				font-weight: 400;
				color: #333333;
				line-height: 48upx;
				text{
					font-size: 30upx;
					font-weight: bold;
					color: #333333;
					line-height: 41upx;
				}
			}
		}
		.popup_img{
			margin-top: 50upx;
			width: 59upx;
			height: 59upx;
		}
	}
</style>
<template>
	<view>
		<view class="top-main">
			<view class="main-top">
				<view class="main-top-fl">
					<image v-if="dataTop.headIco!='' && dataTop.headIco!=null && dataTop.headIco!=undefined" :src= "'https://static.xpandago.net'+'/'+dataTop.headIco" class="touxiang"></image>
					<image v-else src='https://static.xpandago.net/wechat/images/logo.png' class="touxiang"></image>
					<view class="name-info">
						<view class="name">{{dataTop.username}}</view>
						<view v-if="dataTop.memberTypeStr!='' && dataTop.memberTypeStr!=null && dataTop.memberTypeStr!=undefined" class="memberTyp">{{dataTop.memberTypeStr}}</view>
						<!-- <image v-if="dataTop.memberImage!='' && dataTop.memberImage!=null && dataTop.memberImage!=undefined" :src= "'https://static.xpandago.net'+'/'+dataTop.memberImage" class="vipclass" mode="widthFix"></image> -->
					</view>
				</view>
				<view class="main-top-fr">
					<view class="codeInfo">邀请码：{{dataTop.code}}</view>
					<view class="codeInfo">粉丝数：{{dataTop.fsCount}}</view>
					<view class="codeInfo">积分余额：{{dataTop.availablePoint}}</view>
				</view>
			</view>
			<view class="main-top-title">
				<view class="main-top-title-fl" @tap="tapTishi(0)">资金收益</view>
			</view>
			<view class="main-list type">
				<view class="main-list-for">
					<view class="num">{{dataTop.allBalance}}</view>
					<view class="name">总账户</view>
				</view>
				<view class="main-list-for">
					<view class="num">{{dataTop.mouthPrice}}</view>
					<view class="name">本月预估收益</view>
				</view>
				<view class="main-list-for">
					<view class="num">{{dataTop.dayPrice}}</view>
					<view class="name">本日预估收益</view>
				</view>
			</view>
			<view class="main-list">
				<view class="main-list-for">
					<view class="num">{{dataTop.allPrice}}</view>
					<view class="name">累计总收益</view>
				</view>
				<view class="main-list-for">
					<view class="num">{{dataTop.yearPrice}}</view>
					<view class="name">年度总收益</view>
				</view>
				<view class="main-list-for">
					<view class="num">{{dataTop.weekMoney}}</view>
					<view class="name">本周节省金额</view>
				</view>
				<view class="main-list-for">
					<view class="num">{{dataTop.monthMoney}}</view>
					<view class="name">本月节省金额</view>
				</view>
				<!-- <view class="main-list-for">
					<view class="num">{{dataTop.weekPrice}}</view>
					<view class="name">本周收益</view>
				</view> -->
				
			</view>
			<view class="main-list">
				<view class="main-list-for">
					<view class="num">{{dataTop.yearMoney}}</view>
					<view class="name">年度节省金额</view>
				</view>
				<view class="main-list-for">
					<view class="num">{{dataTop.giftAmount}}</view>
					<view class="name">充值款余额</view>
				</view>
				<view class="main-list-for">
					<view class="num">{{dataTop.monthSellPrice}}</view>
					<view class="bjBut" @tap="tapTishi(1)"></view>
					<view class="name">本月销售类收益</view>
				</view>
				<view class="main-list-for">
					<view class="num">{{dataTop.teamBreedPrice}}</view>
					<view class="bjBut" @tap="tapTishi(2)"></view>
					<view class="name">本月管理收益</view>
				</view>
				<!-- <view class="main-list-for">
					<view class="num">{{dataTop.withdrawBalance}}</view>
					<view class="name">可提现</view>
				</view>
				<view class="main-list-for">
					<view class="num">{{dataTop.balanceNo}}</view>
					<view class="name">不可提现</view>
				</view> -->
				
			</view>
		</view>
		<view class="main-bot">
			<view class="main-list-title list" @tap="dingdan" v-if="diingdanShow == true">
				<view class="main-list-title-fl">订单明细</view>
				<view class="main-list-title-fr">
					<image src='/static/img/arrow-right@2x.png' class="tiaozhuan" mode="widthFix"></image>
				</view>
			</view>
			<view class="main-list-title list" @tap="zijin">
				<view class="main-list-title-fl">资金明细</view>
				<view class="main-list-title-fr">
					<image src='/static/img/arrow-right@2x.png' class="tiaozhuan" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="zhao" v-if="hidden"></view>
		<view class="popup" v-if="hidden">
			<view class="popup_main">
				<view class="popup_main_title">收益来源</view>
				<block v-if="types == 1">
					<view class="popup_main_price"><text>销售差价：</text>¥ {{dataTop.monthSellPrice1}}</view>
					<view class="popup_main_price"><text>辅导津贴：</text>¥ {{dataTop.monthSellPrice2}}</view>
					<view class="popup_main_price"><text>其他奖励：</text>¥ {{dataTop.monthSellPrice3}}</view>
				</block>
				<block v-else>
					<view class="popup_main_price"><text>品牌推广补贴：</text>¥ {{dataTop.teamBreedPrice1}}</view>
					<view class="popup_main_price"><text>推荐奖金：</text>¥ {{dataTop.teamBreedPrice2}}</view>
					<view class="popup_main_price"><text>育成奖金：</text>¥ {{dataTop.teamBreedPrice3}}</view>
					<view class="popup_main_price"><text>特殊贡献奖金：</text>¥ {{dataTop.teamBreedPrice4}}</view>
				</block>
			</view>
			<image src='https://static.xpandago.net/wechat/images/closed_boxs%402x.png' @tap="closes" class="popup_img" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api';
	export default {
		data() {
			return {
				hidden:false,
				types:1,
				dataTop: {},
				token:'',
				diingdanShow:true  // 判断从xpa跳转 还是 公众号跳转  false xpa跳转
			}
		},
		onLoad(options) {
			if(options.type!='' && options.type!=null && options.type!=undefined){
				this.diingdanShow=false
			}
			let token=this.getQueryVariable('token');
			this.token=uni.getStorageSync('token')
			let code=this.GetQueryString('code');
			console.log(code)
			var pages = getCurrentPages(); // 当前页面
			var beforePage = pages[pages.length - 1]; // 获取当前页面的对象
			var url = beforePage.route //当前页面url
			uni.setStorageSync('url', url);
			console.log(url)
			if(token!=false){
				uni.setStorageSync('token', token);
				this.token=token
				this.listTop()
			}else if(this.token!=null && this.token !='' && this.token != undefined){
				this.listTop()
			}else if(code!=null && code !='' && code != undefined){
				this.loginCode(code)
			}else{
				uni.showToast({
					title: '请先登录！',
					icon: 'none'
				})
				setTimeout(() => {
					uni.reLaunch({
					  url: "/pages/login/loginWechat"
					})
				}, 1000);
			}
		},
		//下拉刷新
		 onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.listTop()
			setTimeout(function () {
				uni.stopPullDownRefresh();  //停止下拉刷新动画
			}, 1000);
		},
		methods: {
			closes(){
				this.hidden = false
			},
			tapTishi(type){
				if(this.dataTop.memberTypeStr == '至尊VIP'){
					if(type == 1){
						this.hidden = true
						this.types = 1
					}else if (type == 2){
						this.hidden = true
						this.types = 2
					}
				}else if (this.dataTop.memberTypeStr == '金尊VIP' && this.diingdanShow == false){
					if(type == 1){
						this.hidden = true
						this.types = 1
					}else if (type == 2){
						this.hidden = true
						this.types = 2
					}
				}else{
					let centent=''
					if(type==0){
						centent='预估收益，本月销售收益，本月管理收益等数据为1小时更新1次，与最终实际发放金额可能有一定差别，请以最终实际奖金为准'
					}else if(type==1){
						centent='本月销售收益，该收益包含当月销售收益、辅导津贴以及平台额外的奖励'
					}else if(type==2){
						centent='本月管理收益，该收益包含当月品牌推广补贴、推荐奖金、育成奖金、特殊贡献奖金'
					}
					uni.showModal({
					  title: '提示',
					  content: centent,
					  showCancel: false, // 是否显示取消按钮
					  success: function(res) {
					    if (res.confirm) {
					        // 确定按钮
					        // console.log(id)
					    } else if (res.cancel) {
					    }
					  }
					})
				}
			},
			async loginCode(code){
				const [err, res] = await api.loginCode({
						query: {
							code:code
						}
					 });
				 console.log(res)
				 if(res.data.code == 0){
					 let token=res.data.data
					 this.token=token
					 uni.setStorageSync('token', token);
					 this.listTop()
					 // this.newList(this.page)
				 }else{
					 uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
					if(res.data.code==100){
						uni.removeStorageSync('token');
						setTimeout(() => {
							uni.reLaunch({
							  url: "/pages/login/loginWechat"
							})
						}, 1000);
					}
				 }
			},
			//头部接口
			async listTop(){
				const [err, res] = await api.listTop({
					 header:{
						'Content-Type': 'application/json',
						'token': this.token
					 }
				 });
				 console.log(res)
				 if(res.data.code == 0){
					 this.dataTop=res.data.data
				 }else{
					 uni.showToast({
					 	title: res.data.msg,
					 	icon: 'none'
					 })
					if(res.data.code==200){
						uni.removeStorageSync('token');
						setTimeout(() => {
							uni.reLaunch({
							  url: "/pages/login/loginWechat"
							})
						}, 1000);
					}
				 }
			},
			//获取token与id
			getQueryVariable(variable)
			{
			       var query = window.location.search.substring(1);
			       var vars = query.split("&");
			       for (var i=0;i<vars.length;i++) {
			               var pair = vars[i].split("=");
			               if(pair[0] == variable){return pair[1];}
			       }
			       return(false);
			},
			GetQueryString(name){
			    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			    var r = window.location.search.substr(1).match(reg);
			    if(r!=null)return  unescape(r[2]); return null;
			},
			//订单明细
			dingdan(){
				uni.navigateTo({
				  url: "/pages/datail/orderDetails"
				})
			},
			//资金明细
			zijin(){
				uni.navigateTo({
				  url: "/pages/datail/financialDetails"
				})
			}
		}
	}
</script>
